<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <title>商品详情</title>
    <link rel="stylesheet" href="/css/core.css">
    <link rel="stylesheet" href="/css/icon.css">
    <link rel="stylesheet" href="/css/home.css">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <style>
        .m-button {
            padding: 0 0.24rem;
        }

        .btn-block {
            text-align: center;
            position: relative;
            border: none;
            pointer-events: auto;
            width: 100%;
            display: block;
            font-size: 1rem;
            height: 2.5rem;
            line-height: 2.5rem;
            margin-top: 0.5rem;
            border-radius: 3px;
        }

        .btn-primary {
            background-color: #04BE02;
            color: #FFF;
        }

        .btn-warning {
            background-color: #FFB400;
            color: #FFF;
        }

        .mask-black {
            background-color: rgba(0, 0, 0, 0.6);
            position: fixed;
            bottom: 0;
            right: 0;
            left: 0;
            top: 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            z-index: 999;
        }

        .m-actionsheet {
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: #fff;
            -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
        }

        .actionsheet-toggle {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .actionsheet-item {
            display: block;
            position: relative;
            font-size: 0.8rem;
            color: #555;
            height: 2rem;
            line-height: 2rem;
            background-color: #FFF;
        }

        .actionsheet-item:after {
            content: '';
            position: absolute;
            z-index: 2;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px solid #D9D9D9;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
        }

        .actionsheet-action {
            display: block;
            margin-top: .15rem;
            font-size: 0.8rem;
            color: #555;
            width: 25px;
            height: 25px;
            background-image: url('');
            background-repeat: no-repeat;
            background-size: 25px;
            position: absolute;
            top: 10px;
            right: 10px;
        }

    </style>
</head>
<body>
<div id="itemArray">
    <header class="aui-header-default aui-header-fixed ">
        <a href="javascript:history.back(-1)" class="aui-header-item">
            <i class="aui-icon aui-icon-back"></i>
        </a>
        <div class="aui-header-center aui-header-center-clear">
            <div class="aui-header-center-logo">
                <div id="scrollSearchPro">
                    <span class="current">商品</span>
                    <span>评价</span>
                    <span>详情</span>
                </div>
            </div>
        </div>
        <a href="javascript:;" class="aui-header-item-icon select" style="min-width:0;">
            <i class="aui-icon aui-icon-share-pd selectVal" onselectstart="return false"></i>
            <div class="aui-header-drop-down selectList">
                <div class="aui-header-drop-down-san"></div>
                <div class="">
                    <p class="" onclick="location='http://www.a-ui.cn/'">消息</p>
                    <p class="" onclick="location='index.html'">首页</p>
                    <p class="" onclick="location='index.html'">帮助</p>
                    <p class="" onclick="location='index.html'">分享</p>
                </div>
            </div>
        </a>
    </header>
    <div class="aui-banner-content aui-fixed-top" data-aui-slider="">
        <div class="aui-banner-wrapper">
            <!--<div class="aui-banner-wrapper-item" th:each="img : ${imageList}">
                <a href="javascript:;">
                    <img th:src="${img}">
                </a>
            </div>-->
            <div class="aui-banner-wrapper-item" v-for="image in skuImages">
                <a href="javascript:;">
                    <img :src="image">
                </a>
            </div>
        </div>
        <div class="aui-banner-pagination"></div>

    </div>
    <div class="aui-product-content">
        <div class="aui-real-price clearfix">
			<span>
				<i>￥</i>{{(sku.price/100).toFixed(2)}}
			</span>
            <!--<del><span class="aui-font-num">￥18888</span></del>
            <div class="aui-settle-choice">
                <span>促销价</span>
            </div>-->
        </div>
        <div class="aui-product-title">
            <h2>
                {{sku.name}}
            </h2>
            <p th:text="${spu.caption}">
            </p>
        </div>
        <div class="aui-product-boutique clearfix">
            <!--<img src="/picture/icon-usa.png" alt="">-->
            <span class="aui-product-tag-text">{{sku.brandName}}品牌</span>
            <img src="/picture/icon-sj.png" alt="">
            <span class="aui-product-tag-text">精选商家</span>
        </div>

        <div class="aui-product-coupon">
            <a href="javascript:;" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear"
               data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
                <div class="aui-address-cell-bd">选择</div>
                <div class="aui-address-cell-ft">{{chooseSpec}}</div>
            </a>

            <!-- 弹窗A begin -->
            <div class="m-actionsheet" id="actionSheet">
                <div style="position:relative">
                    <div class="aui-spec-menu-top">
                        <div class="aui-spec-first-pic">
                            <img src="/picture/pd-zf-1.jpg" alt="">
                        </div>
                        <div class="aui-spec-first-sif" v-if="chooseSpec =='缺货'">
                            <h2>暂无报价</h2>
                        </div>
                        <div class="aui-spec-first-sif" v-else>
                            <h2>￥{{((sku.price/100)*num).toFixed(2)}} </h2>
                            <p>重量:{{(num*sku.weight/1000).toFixed(2)}}kg</p>
                            <p>商品编号:{{sku.id}} </p>
                            <p>库存:{{sku.num}} </p>
                        </div>
                    </div>
                    <div class="aui-product-text-content">
                        <div class="aui-product-text-content-list">
                            <div class="aui-product-text-content-list-bd">
                                <span>已选</span>
                            </div>
                            <div class="aui-product-text-content-list-ft">
                                <span>{{chooseSpec}}</span>
                            </div>
                        </div>
                        <div class="aui-product-text-content-list" th:each="spec,specStat : ${specificationList}">
                            <div class="aui-product-text-content-list-bd">
                                <span th:text="${spec.key}"></span>
                            </div>
                            <div class="aui-product-text-content-list-ft" th:each="arrValue:${specStat.current.value}">
                                <a href="javascript:;"
                                   th:v-bind:class="|sel('${spec.key}','${arrValue}')?'aui-selected':''|"
                                   th:@click="|selectSpecification('${spec.key}','${arrValue}')|">
                                    <i th:text="${arrValue}"></i>
                                </a>
                            </div>
                        </div>
                        <div class="aui-product-text-content-list">
                            <div class="aui-product-text-content-list-bd">
                                <span>数量</span>
                            </div>
                            <div class="aui-car-box-list-text-price">
                                <div class="aui-car-box-list-text-arithmetic" style="position:inherit">
                                    <a href="javascript:;" class="minus" @click="num > 1?num=num-1:num=1">-</a>
                                    <input class="num" v-model="num" disabled>
                                    <a href="javascript:;" class="plus" @click="num = num+1">+</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <a href="javascript:;" class="actionsheet-action" id="cancel"></a>
                    <div class="aui-product-function" v-if="chooseSpec =='缺货'">
                        <a style="width: 100%;background: gray" href="javascript:;">缺货</a>
                    </div>
                    <div class="aui-product-function" v-else>
                        <a @click="addCart()" class="yellow-color" style="background: #ffb03f">加入购物车</a>
                        <a @click="addOrder()" class="red-color" style="background:#FF5E53 ">立即购买</a>
                    </div>

                </div>
            </div>
            <div class="m-actionsheet" id="J_ActionSheet">
                <div class="aui-coupon-codes">
                    <h2>店铺优惠券</h2>
                    <div class="aui-coupon-codes-item">
                        <img src="/picture/icon-coupon1.jpg" alt="">
                    </div>
                    <div class="aui-coupon-codes-item">
                        <img src="/picture/icon-coupon1.jpg" alt="">
                    </div>
                    <div class="aui-coupon-codes-item">
                        <img src="/picture/icon-coupon1.jpg" alt="">
                    </div>
                </div>
                <a href="javascript:;" class="actionsheet-action" id="J_Cancel"></a>
            </div>
            <!-- 弹窗A end-->
            <a href="javascript:;" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear" id="J_ShowActionSheet">
                <div class="aui-address-cell-bd">领券</div>
                <div class="aui-address-cell-ft">
                    <span>满159减10券</span>
                    <span>满299减30券</span>
                </div>
            </a>
            <!--<a href="javascript:;" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
                <div class="aui-address-cell-bd">配送</div>
                <div class="aui-address-cell-ft">
                    <input class="aui-Address-box-input" type="text" readonly="" id="J_Address" readonly="readonly" placeholder="所在地区" style="height:auto; border-bottom:none; padding-left:0; margin-bottom:0;">
                </div>
            </a>-->
            <a href="javascript:;" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
                <div class="aui-address-cell-bd">运费</div>
                <div class="aui-address-cell-ft">免运费</div>
            </a>
            <a href="javascript:;" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
                <div class="aui-address-cell-bd">说明</div>
                <div class="aui-address-cell-ft">假一赔十 7天无忧退货</div>
            </a>
        </div>
        <div class="aui-dri"></div>
        <div class="aui-product-evaluate">
            <a href="javascript:;"  @click="evaluatepage(sku.id)" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
                <div class="aui-address-cell-bd" >商品评价 <em>({{sku.commentNum}})</em></div>
                <div class="aui-address-cell-ft">
                    <span v-if="sku.commentNum > 0">好评 {{((starNum/sku.commentNum)*20).toFixed(1)}}% </span>
                </div>
            </a>
        </div>
        <div class="aui-dri"></div>
        <div class="aui-product-pages">
            <div class="aui-product-pages-title">
                <h2>图文详情</h2>
            </div>
            <div class="aui-product-pages-img" th:utext="${spu.introduction}">
            </div>
        </div>

    </div>

    <footer class="aui-footer-product">
        <div class="aui-footer-product-fixed">
            <div class="aui-footer-product-concern-cart">
                <a href="/customerNotice.html?customer=customer'">
                    <span class="aui-f-p-icon"><img src="/picture/icon-kf.png" alt=""></span>
                    <span class="aui-f-p-focus-info">客服</span>
                </a>
                <a @click="collection()" v-if="isCo == true">
                    <span class="aui-f-p-icon"><img src="/picture/icon-y-sc.png" alt=""></span>
                    <span class="aui-f-p-focus-info">已收藏</span>
                </a>
                <a @click="collection()" v-if="isCo == false">
                    <span class="aui-f-p-icon"><img src="/picture/icon-sc.png" alt=""></span>
                    <span class="aui-f-p-focus-info">收藏</span>
                </a>
                <a @click="focusOn()" v-if="isFo == true">
                    <span class="aui-f-p-icon"><img src="/image/icon_radio4.png" alt=""></span>
                    <span class="aui-f-p-focus-info">已关注</span>
                </a>
                <a @click="focusOn()" v-if="isFo == false">
                    <span class="aui-f-p-icon"><img src="/image/icon_radio3.png" alt=""></span>
                    <span class="aui-f-p-focus-info">关注</span>
                </a>
            </div>
            <div class="aui-footer-product-action-list" v-if="chooseSpec =='缺货'">
                <a style="width: 100%;background: gray" href="javascript:;">缺货</a>
            </div>
            <div class="aui-footer-product-action-list" v-else>
                <a @click="addCart()" class="yellow-color" style="background: #ffb03f">加入购物车</a>
                <a @click="addOrder()" class="red-color" style="background:#FF5E53 ">立即购买</a>
            </div>
        </div>
    </footer>

</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/aui.js"></script>
<script src="/js/util.js"></script>
<script src="/js/aui-down.js"></script>
<script src="/js/axios.js"></script>
<script type="text/javascript" src="/js/city.js"></script>
<script src="/js/storage.js"></script>
<script th:inline="javascript">
    let methods = getQueryString("methods");
    let carnum = getQueryString("num")
    var item = new Vue({
        el: '#itemArray',
        data: {
            skuList: [[${skuList}]],
            sku: {},
            spec: {},
            chooseSpec: '',
            num: 1,
            comment: {},
            starNum: 0,
            isFo: false,
            isCo: false,
            skuImages:[]
        },
        methods: {
            sel: function (name, value) {
                if (this.spec == undefined) {
                    return false;
                }
                if (this.spec[name] == value) {
                    return true;
                } else {
                    return false;
                }
            },
            selectSpecification: function (specName, specValue) {
                this.$set(this.spec, specName, specValue);
                for (var i = 0; i < this.skuList.length; i++) {
                    if (this.isQ(JSON.parse(this.skuList[i].spec), this.spec)) {
                        this.chooseSpec = '';
                        this.sku = this.skuList[i];
                        this.skuImages = this.sku.images.split(",");
                        this.getCommentNum(this.sku.id);
                        this.isFocusOn();
                        for (var k in JSON.parse(this.sku.spec)) {
                            this.chooseSpec += JSON.parse(this.sku.spec)[k] + " "
                        }
                        break;
                    } else {
                        this.chooseSpec = '缺货'
                    }
                }
            },
            isQ: function (map1, map2) {
                //判断两个对象属性个数是否相等
                if (Object.keys(map1).length != Object.keys(map2).length) {
                    return false;
                }
                for (var k in map1) {
                    if (map1[k] != map2[k]) {
                        return false;
                    }
                }
                return true;
            },
            addCart(){
                let _this = this;
                let params = {
                    skuId:this.sku.id,
                    num: _this.num
                }
                if (carnum != null || carnum != undefined){
                    params.num = carnum;
                }
                params.num = _this.num
                axios.post("/app/order/api/cart/add",params,{headers: headersLocalStorage}).then(function (res) {
                    if (res.data.code == 0){
                        location.href = "/car.html";
                    }else{
                        location.href = "/login.html?fromx=/"+_this.sku.spuId+"/"+_this.sku.id+".html?methods=addCart&num="+_this.num;
                    }
                }).catch(function (e){
                    if (e.response.status == 401){
                        location.href = "/login.html?fromx=/"+_this.sku.spuId+"/"+_this.sku.id+".html?methods=addCart&num="+_this.num;
                    }
                });
            },
            addOrder(){
                let url = "/oneorder.html?skuId=" + this.sku.id + "&num=" + this.num;
                exception(url)
            },
            getCommentNum(skuId){
                var _this = this
                axios.get("/app/comment/api/comment/count?skuid=" + skuId).then(function (res) {
                    _this.sku.commentNum = res.data.data;
                    if (_this.sku.commentNum > 0) {
                        axios.post("/app/comment/api/comment/list",{"skuid":skuId}).then(function (res) {
                            _this.comment = res.data.data;
                            _this.starNum = 0;
                            if (_this.comment != null && _this.comment.length > 0){
                                for (var i = 0; i < _this.comment.length; i++) {
                                    _this.starNum += _this.comment[i].star;
                                }
                            }
                        });
                    }
                });
            },
            evaluatepage(skuId){
                location.href = "/pingjia.html?skuId=" + skuId;
            },
            isCollection(){
                var _this = this;
                axios.get("/app/behavior/api/behavior/isCollect?spuId=" + _this.sku.spuId,
                        {
                            headers:headersLocalStorage
                        }).then(function (res) {
                    if(res.data.code == 10113){
                        _this.isCo = true;
                    }else{
                        _this.isCo = false;
                    }
                });
            },
            collection(){
                var _this = this;
                let params = {
                    "spuId":_this.sku.spuId,
                    "categoryId":_this.sku.categoryId,
                    "categoryName":_this.sku.categoryName
                }
                axios.post("/app/behavior/api/behavior/collect",params,{headers:headersLocalStorage}).then(function (res) {
                    _this.isCollection();
                }).catch(function (e){
                    if (e.response.status == 401){
                        location.href = "/login.html?fromx=/"+_this.sku.spuId+"/"+_this.sku.id+".html";
                    }
                });
            },
            isFocusOn(){
                var _this = this;
                axios.get("/app/behavior/api/behavior/isFocus?skuId=" + _this.sku.id, {headers:headersLocalStorage}).then(function (res) {
                    if(res.data.code == 10111){
                        _this.isFo = true;
                    }else{
                        _this.isFo = false;
                    }
                }).catch(function (e){
                    console.log(e.response.status)
                });
            },
            focusOn(){
                var _this = this;
                let params = {
                    "skuId":_this.sku.id,
                    "categoryId":_this.sku.categoryId,
                    "categoryName":_this.sku.categoryName
                }
                axios.post("/app/behavior/api/behavior/focus",params,{headers:headersLocalStorage}).then(function (res) {
                    if (res.data.code == 1){
                        location.href = "/login.html?fromx=/"+_this.sku.spuId+"/"+_this.sku.id+".html?methods=focus";
                    }else
                        _this.isFocusOn();
                }).catch(function (e){
                    if (e.response.status == 401){
                        location.href = "/login.html?fromx=/"+_this.sku.spuId+"/"+_this.sku.id+".html";
                    }
                })
            }
        },
        created: function () {
            this.getCommentNum(this.skuList[0].id);
            this.sku = JSON.parse(JSON.stringify(this.skuList[0]));
            this.spec = JSON.parse(this.skuList[0].spec);
            this.skuImages = this.sku.images.split(",");
            for (var k in JSON.parse(this.sku.spec)) {
                this.chooseSpec += JSON.parse(this.sku.spec)[k] + " "
            }
            if (localStorage.token && localStorage.userId && localStorage.username){
                this.isCollection();
                this.isFocusOn(this.sku.id);
                if (methods!=undefined){
                    console.log(methods);
                    if (methods == 'addCart' && carnum != undefined){
                        this.addCart();
                    }
                }
            }
        }

    })
</script>
<script type="text/javascript">
    /**
     * Javascript API调用Tab
     */
    !function ($) {
        var $tab = $('#J_Tab');

        $tab.tab({
            nav: '.tab-nav-item',
            panel: '.tab-panel-item',
            activeClass: 'tab-active'
        });

        /*
         $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
         console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
         });
         */

        $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
            console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
        });
    }(jQuery);
</script>
<script>
    /**
     * 默认调用
     */
    !function () {
        var $target = $('#J_Address');

        $target.citySelect();

        $target.on('click', function (event) {
            event.stopPropagation();
            $target.citySelect('open');
        });

        $target.on('done.ydui.cityselect', function (ret) {
            $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    }();
    /**
     * 设置默认值
     */
    !function () {
        var $target = $('#J_Address2');

        $target.citySelect({
            provance: '新疆',
            city: '乌鲁木齐市',
            area: '天山区'
        });

        $target.on('click', function (event) {
            event.stopPropagation();
            $target.citySelect('open');
        });

        $target.on('done.ydui.cityselect', function (ret) {
            $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    }();
</script>
<script type="text/javascript">
    $(function () {
        //绑定滚动条事件
        //绑定滚动条事件
        $(window).bind("scroll", function () {
            var sTop = $(window).scrollTop();
            var sTop = parseInt(sTop);
            if (sTop >= 100) {
                if (!$("#scrollSearchPro").is(":visible")) {
                    try {
                        $("#scrollSearchPro").slideDown();
                    } catch (e) {
                        $("#scrollSearchPro").show();
                    }
                }
            }
            else {
                if ($("#scrollSearchPro").is(":visible")) {
                    try {
                        $("#scrollSearchPro").slideUp();
                    } catch (e) {
                        $("#scrollSearchPro").hide();
                    }
                }
            }
        });
    })
</script>
<script>
    /**
     * Javascript API调用ActionSheet
     */
    !function ($) {
        var $myAs = $('#J_ActionSheet');

        $('#J_ShowActionSheet').on('click', function () {
            $myAs.actionSheet('open');
        });

        $('#J_Cancel').on('click', function () {
            $myAs.actionSheet('close');
        });

    }(jQuery);
</script>

</body>
</html>